<template>
  <div id="patient-card" class="container card">
    <div class="row header">
      <div class="col-2 ID_photo">
        <div class="photo">
          <img alt="" class="img-fluid img-thumbnail rounded" src="/src/assets/pic/爱莉希雅.jpg"/>
        </div>
        <button class="btn">上传头像</button>
      </div>
      <div class="information col-10">
        <div class="title">基本信息</div>
        <div class="row">
          <div class="row col-4">
            <label class="col-3" for="id">编号：</label>
            <div class="col-9"><input id="id" v-model="patient.id" class="form-control" required type="text"></div>
          </div>
          <div class="row col-4">
            <label class="col-3" for="name">姓名：</label>
            <div class="col-9"><input id="name" v-model="patient.name" class="form-control" required type="text"></div>
          </div>
          <div class="row col-4">
            <label class="col-3" for="sex">性别：</label>
            <div class="col-9"><input id="sex" v-model="patient.sex" class="form-control" required type="text"></div>
          </div>
        </div>
        <div class="row">
          <div class="row col-4">
            <label class="col-3" for="birthday">出生日期：</label>
            <div class="col-9"><input id="birthday" v-model="patient.birthday" class="form-control" required
                                      type="text"></div>
          </div>
          <div class="row col-4">
            <label class="col-3" for="phone">手机号：</label>
            <div class="col-9"><input id="phone" v-model="patient.phone" class="form-control" required type="text">
            </div>
          </div>
          <div class="row col-4">
            <label class="col-3" for="idCard">身份证：</label>
            <div class="col-9"><input id="idCard" v-model="patient.idCard" class="form-control" required type="text">
            </div>
          </div>
        </div>
        <div class="row">
          <div class="row col-4">
            <label class="col-3" for="domicile">户籍：</label>
            <div class="col-9"><input id="domicile" v-model="patient.domicile" class="form-control" required
                                      type="text"></div>
          </div>
          <div class="row col-4">
            <label class="col-3" for="doctor">负责医生：</label>
            <div class="col-9"><input id="doctor" v-model="patient.doctor" class="form-control" required type="text">
            </div>
          </div>
          <div class="row col-4">
            <label class="col-3" for="doctor">床位：</label>
            <div class="col-9"><input id="doctor" v-model="patient.bedSpace" class="form-control" required type="text">
            </div>
          </div>
        </div>
        <div class="btn-group">
          <button class="btn btn-primary">修改信息</button>
        </div>
      </div>
    </div>
  </div>
  <div class="container row">
    <div id="select-group" class="col-2 container">
      <div class="row">
        <div class="col-10 card select-group-body">
          <div class="select-group">
            <div class="select-group-line"><abbr>查看患者报告</abbr></div>
            <div class="select-group-line"><abbr>申请CT查询</abbr></div>
            <div class="select-group-line"><abbr>申请MPR查询</abbr></div>
            <div class="select-group-line"><abbr>申请CT螺旋扫描查询</abbr></div>
            <div class="select-group-line"><abbr>申请VR扫描</abbr></div>
            <div class="select-group-line"><abbr>转院申请</abbr></div>
          </div>
        </div>
        <div class="col-2"></div>
      </div>
    </div>
    <div id="report-card" class="container card col-10">
      <div class="row report-list">
        <div class="title">患者报告</div>
        <table class="table table-responsive report-list">
          <thead>
          <tr>
            <th>报告编号</th>
            <th>审核员</th>
            <th>内容简介</th>
            <th>开具医院</th>
            <th>开具医联体</th>
            <th>开具时间</th>
            <th>查看详情</th>
          </tr>
          </thead>
          <tbody>
          <tr v-for="report in patient.reports" class="report">
            <td>{{ report.id }}</td>
            <td>{{ report.reviewer }}</td>
            <td>{{ report.content }}</td>
            <td>{{ report.hospital }}</td>
            <td>{{ report.medicalConsortium }}</td>
            <td>{{ report.createTime }}</td>
            <td>
              <button class="btn" type="button" @click="displayReport(report.id)">点此查看详情</button>
            </td>
          </tr>
          </tbody>
        </table>
      </div>
    </div>
  </div>
  <div id="patientReport" class="modal">
    <div class="modal-dialog">
      <div class="modal-content">
        <div class="modal-header">
          <h4 class="modal-title">{{ report.hospital }} 开具的诊断报告</h4>
          <button class="btn-close" data-bs-dismiss="modal" type="button"></button>
        </div>
        <div class="modal-body">
          <div class="patient-information">
            <div class="row">
              <div class="col"><span class="patient-information-data-title">姓名：</span>{{ patient.name }}</div>
              <div class="col"><span class="patient-information-data-title">性别：</span>{{ patient.sex }}</div>
              <div class="col"><span class="patient-information-data-title">生日：</span>{{ patient.birthday }}</div>
            </div>
            <div class="row">
              <div class="col"><span class="patient-information-data-title">手机：</span>{{ patient.phone }}</div>
              <div class="col"><span class="patient-information-data-title">医生：</span>{{ patient.doctor }}</div>
              <div class="col"><span class="patient-information-data-title">床位：</span>{{ patient.bedSpace }}</div>
            </div>
          </div>
          <div class="report">
            <div class="report-title">
              <div><span class="modal-data-title">临床诊断：</span>{{ report.clinicalDiagnosis }}</div>
              <div><span class="modal-data-title">检查项目：</span>{{ report.inspectionItems }}</div>
              <div><span class="modal-data-title">检查方法：</span>{{ report.inspectionMethod }}</div>
            </div>
            <div class="report-body">
              <div><span class="modal-data-title">诊断结果：</span>{{ report.diagnosticResults }}</div>
            </div>
          </div>
          <div class="report-ending">
            <div class="row">
              <span class="col"><span class="modal-data-title">开具医院：</span>{{ report.hospital }}</span>
              <span class="col"><span class="modal-data-title">开具医联体：</span>{{ report.medicalConsortium }}</span>
              <span class="col"><span class="modal-data-title">开具医生：</span>{{ report.reviewer }}</span>
            </div>
          </div>

        </div>
        <div class="modal-footer">
          <button class="btn btn-danger" data-bs-dismiss="modal" type="button">关闭</button>
        </div>
      </div>
    </div>
  </div>
  <button id="patientReportButton" class="btn btn-primary" data-bs-target="#patientReport" data-bs-toggle="modal"
          style="display: none"
          type="button"></button>
</template>
<script>

import "/src/assets/bootstrap-5.3.0/js/bootstrap.min.js";
import "/src/assets/bootstrap-5.3.0/js/bootstrap.bundle.js";


export default {
  name: 'patient',
  data() {
    return {
      patient: {
        id: "1",
        name: "爱莉希雅",
        sex: "女",
        birthday: "2004-11-11",
        phone: "12432435875",
        idCard: "488360457860074060",
        domicile: "上海",
        doctor: "王医生",
        reports: [
          {
            id: 1,
            reviewer: "王医生",
            content: "泥嚎泥嚎泥嚎泥嚎泥嚎泥嚎泥嚎泥嚎泥嚎",
            hospital: "医院 A",
            medicalConsortium: "医联体 A",
            createTime: "2024年10月17日 00:42:39"
          },
          {
            id: 2,
            reviewer: "王医生",
            content: "泥嚎泥嚎泥嚎泥嚎泥嚎泥嚎泥嚎泥嚎泥嚎泥嚎",
            hospital: "医院 A",
            medicalConsortium: "医联体 A",
            createTime: "2024年10月17日 00:42:40"
          },
          {
            id: 3,
            reviewer: "王医生",
            content: "患者良好",
            hospital: "医院 B",
            medicalConsortium: "医联体 B",
            createTime: "2024年10月17日 00:42:41"
          }, {
            id: 4,
            reviewer: "王医生",
            content: "患者良好",
            hospital: "医院 B",
            medicalConsortium: "医联体 B",
            createTime: "2024年10月17日 00:42:41"
          }],
        bedSpace: "妇产科1室001号床"
      },
      report: {
        createTime: "",
        hospital: "",
        medicalConsortium: "",
        reviewer: "",
        clinicalDiagnosis: "",
        inspectionItems: "",
        inspectionMethod: "",
        diagnosticResults: ""
      },
      reports: {
        1: {
          createTime: "2024年10月22日 11:06:08",
          hospital: "医院 A",
          medicalConsortium: "医联体 A",
          reviewer: "王医生",
          clinicalDiagnosis: "踝关节扭伤",
          inspectionItems: "CT右踝关节平扫+重建",
          inspectionMethod: "CT右踝关节平扫+重建：CT螺旋扫描，包括整个右踝关节以及周围软组织，层厚3mm，VR及MPR重建",
          diagnosticResults: "右外踝副骨透亮线影，周围软组织肿胀，请结合临床，必要时进行MRI检查"
        },
        2: {
          createTime: "2024年10月22日 11:06:08",
          hospital: "医院 A",
          medicalConsortium: "医联体 A",
          reviewer: "王医生",
          clinicalDiagnosis: "踝关节扭伤",
          inspectionItems: "CT右踝关节平扫+重建",
          inspectionMethod: "CT右踝关节平扫+重建：CT螺旋扫描，包括整个右踝关节以及周围软组织，层厚3mm，VR及MPR重建",
          diagnosticResults: "右外踝副骨透亮线影，周围软组织肿胀，请结合临床，必要时进行MRI检查"
        },
        3: {
          createTime: "2024年10月22日 11:06:08",
          hospital: "医院 B",
          medicalConsortium: "医联体 B",
          reviewer: "王医生",
          clinicalDiagnosis: "踝关节扭伤",
          inspectionItems: "CT右踝关节平扫+重建",
          inspectionMethod: "CT右踝关节平扫+重建：CT螺旋扫描，包括整个右踝关节以及周围软组织，层厚3mm，VR及MPR重建",
          diagnosticResults: "右外踝副骨透亮线影，周围软组织肿胀，请结合临床，必要时进行MRI检查"
        },
        4: {
          createTime: "2024年10月22日18:34:52",
          hospital: "医院 B",
          medicalConsortium: "医联体 B",
          reviewer: "王医生",
          clinicalDiagnosis: "踝关节扭伤",
          inspectionItems: "CT右踝关节平扫+重建",
          inspectionMethod: "CT右踝关节平扫+重建：CT螺旋扫描，包括整个右踝关节以及周围软组织，层厚3mm，VR及MPR重建",
          diagnosticResults: "右外踝副骨透亮线影，周围软组织肿胀，请结合临床，必要时进行MRI检查"
        }
      }
    };
  },
  methods: {
    submitForm() {
      console.log("提交的患者数据:", this.patient);
    },
    displayReport(report_id) {
      this.report = this.reports[report_id];
      document.getElementById("patientReportButton").click();
    }
  }
};
</script>
<style scoped>
@import "/src/assets/bootstrap.min.css";

body {
  background-color: #f8f9fa;
}

.card {
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
  border-radius: 10px;
  border: none;
  background-color: white;
}

.container {
  max-width: 1000px;
  margin: auto;
}

div#patient-card {
  padding: 40px;
}

div#report-card {
  padding: 20px;
  margin-top: 20px;
}

div#select-group {
  height: 100%;
}

div.select-group-body {
  padding-top: 20px;
  padding-bottom: 20px;
  margin-top: 10px;
}

div.select-group div.select-group-line {
  margin-top: 5px;
  padding: 5px;
  font-size: 12px;
  margin-bottom: 5px;
}

.container > .row {
  margin-top: 10px;
  margin-bottom: 10px;
}

.ID_photo {
  padding-left: 0;
  padding-right: 20px;
}

.ID_photo button {
  margin-top: 10px;
  font-size: 8px;
  float: right;
  border: none;
  background-color: #ffc0cb;
  color: white;
}

.ID_photo button:hover {
  background-color: #ffc0cb;
  color: white;
}

.ID_photo button:active {
  background-color: #ffc0cb;
  color: white;
}

.ID_photo button:focus {
  background-color: #ffc0cb;
  color: white;
}

.title {
  border-left: #ffc0cb solid 5px;
  padding-left: 12px;
  font-size: 16px;
  font-weight: bold;
}

.information > .row {
  margin-top: 10px;
  margin-bottom: 10px;
  padding-left: 10px;
}

.information > .row label {
  padding: 0;
  font-size: 11px;
  text-align: right;
  display: flex;
  align-items: center;
}

.information > .row input {
  font-size: 11px;
}

div.report-list > table {
  margin-top: 10px;
}

div.report-list > table > thead > tr {
  font-size: 14px;
}

div.report-list > table > tbody > tr > td {
  font-size: 12px;
}

div.report-list > table > tbody button {
  border: none;
  background-color: #ffc0cb;
  color: white;
  height: 15px;
  line-height: 15px;
  text-align: center;
  font-size: 10px;
  padding-top: 0;
}

div.report-list > table > tbody button:hover {
  background-color: #ffc0cb;
  color: white;
}

div.report-list > table > tbody button:active {
  background-color: #ffc0cb;
  color: white;
}

div.report-list > table > tbody button:focus {
  background-color: #ffc0cb;
  color: white;
}


div#patientReport {
  margin-top: 50px;
}

div.patient-information {
  font-size: 12px;
  border-top: 1px solid #dee2e6;
  border-bottom: 1px solid #dee2e6;
  padding: 10px;
}

div.patient-information .row {
  margin-top: 10px;
  margin-bottom: 10px;
}

div.report {
  border-bottom: 1px solid #dee2e6;
}

div.report-title {
  padding: 10px;
  border-bottom: 1px solid #dee2e6;
}

div.report-title div {
  margin-top: 5px;
  margin-bottom: 5px;
}

div.report-body {
  padding: 10px;
  min-height: 100px;
}

div.report-body div {
  margin-top: 5px;
  margin-bottom: 5px;
}

div.report-ending {
  padding: 10px;
}

h4.modal-title {
  text-align: center;
  display: block;
}

span.patient-information-data-title {
  font-weight: bold;
}

span.modal-data-title {
  font-weight: bold;
  width: 6em;
  text-align: justify;
}

li.list-item span {
  float: left;
  text-align: left;
}

div.btn-group button {
  max-width: 100px;
  margin-top: 10px;
  font-size: 10px;
  float: right;
  border: none;
  background-color: #ffc0cb;
  color: white;
}

div.btn-group button:hover {
  background-color: #ffc0cb;
  color: white;
}

div.btn-group button:active {
  background-color: #ffc0cb;
  color: white;
}

div.btn-group button:focus {
  background-color: #ffc0cb;
  color: white;
}
</style>
